import { useBreakpoints } from '@vueuse/core'

const breakpoints = useBreakpoints({
  xs: 0, // mobile
  s: 640, // tablet
  m: 1024, // laptop s
  l: 1280, // laptop
  xl: 1536, // laptop l
  xxl: 1920 // normal desktop display
})

export function updateHtmlFontSize() {
  let fontSize = 1

  if (breakpoints.xxl.value) {
    fontSize = 1
  } else if (breakpoints.xl.value) {
    fontSize = 0.95
  } else if (breakpoints.l.value) {
    fontSize = 0.8
  } else if (breakpoints.m.value) {
    fontSize = 0.75
  } else if (breakpoints.s.value) {
    fontSize = 0.7
  }

  document.documentElement.style.fontSize = fontSize + 'px'
}

export function updateHeight() {
  //@ts-ignore
  document.getElementById('app').style.height = document.body.clientHeight + 'px'
}

export default breakpoints
